<!DOCTYPE html>
<html ng-app="app">

  <head>
    <link data-require="bootstrap@*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-touch.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-animate.js"></script>
    <script data-require="ui-bootstrap@*" data-semver="0.12.1" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
    <script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
    <script src="/dist/release/ui-grid.js"></script>
    <link rel="stylesheet" href="/dist/release/ui-grid.css" type="text/css" />
    <style type="text/css">
        .grid {
          width: 100%;
          max-width: 600px;
          height: 400px;
        }

        body {
          padding: 20px;
        }
    </style>
  </head>

  <body>
    <div ng-controller="MainCtrl">
      <button ng-click="openModal()" class="btn btn-success">Open Modal</button>
    </div>

    <script>
        var app = angular.module('app', ['ui.grid', 'ui.bootstrap']);

        app.controller('MainCtrl', function ($scope, $modal) {
          $scope.openModal = function () {
            $modal.open({
              templateUrl: 'modal.html'
            });
          }
        });

        app.controller('ModalDemoCtrl', function ($scope, $http) {
          $scope.gridOptions = {};

          $http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
            .success(function(data) {
              $scope.gridOptions.data = data;
            });
        });
    </script>

    <script type="text/ng-template" id="modal.html">
        <div ng-controller="ModalDemoCtrl">
                <div class="modal-header">
                    <h3 class="modal-title">I'm a modal!</h3>
                </div>
                <div class="modal-body">
                    <div id="grid1" ui-grid="gridOptions" class="grid"></div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-warning" ng-click="$close()">Cancel</button>
                </div>
            <div ng-show="selected">Selection from a modal: {{ selected }}</div>
        </div>
    </script>
</body>
</html>
